<template>
	<view class="sort-Header sort-position">
		<text>封面图</text>
		<text>标题</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>
	<view class="sort-Header sort-table" v-for="(item,index) in seckill_data" :key="index">  
		<image :src="item.cover" mode="aspectFill"></image>
		<text>{{item.title}}</text>
		<text class="sort-but" @click="deLete(item._id,index)">删除</text>
	</view>
	<!-- 没有数据的提示 -->
	<view class="Tips" v-if="seckill_data==0">你还没有秒杀数据</view>
	<!-- 底部 -->
	<view style="height: 300rpx;"></view>
	<view class="newly-added-view">
		<view class="newly-added" @click="show = true">创建秒杀</view>
	</view>
	<!-- 弹窗 -->
	<page-container :show="show" position="bottom" bindenter="onEnter">
		<view class="space-view">
			<view class="modify-sub modify-padding">
				<image src="/static/detail/guanbi.svg" mode="widthFix"  @click="show = false"></image>
				<text>创建秒杀</text>
				<text @click="suMit">提交</text>
			</view>
			<view class="upload-cover">
				<image src="/static/detail/miaosha-img.jpg" v-if="seckill_cover == '' " mode="aspectFill" @click="upImage"></image>
				<image :src="seckill_cover" mode="aspectFill"  @click="preView(seckill_cover)"></image>
				<image src="/static/detail/shanchu.svg" v-if="seckill_cover != '' " @click="seckill_cover ='' " mode="widthFix"></image>
			</view>
			<view class="seckill-input">
				<input type="text" v-model="seckill_title" placeholder="请输入标题" placeholder-class="input-color" cursor-spacing="50" />
				<input type="number" v-model="seckill_price" placeholder="请输入秒杀价格" placeholder-class="input-color" cursor-spacing="50" />
			</view>
			<!-- 设置时间 -->
			<view class="pick-Outer">
				<!-- 开始时间 -->
				<view class="pick-view Underline">
					<view>
						<text>设置开始时间</text>
						<picker class="flex-left" mode="multiSelector" :range="start_arr" :value="multiIndex_a" range-key="name" @columnchange="colStart" @change="changeStart">
							<view>
								<text class="pick-time">{{start_time}}</text>
								<image src="../../static/detail/xiangyou-jiantou.svg"></image>
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 结束时间 -->
				<view class="pick-view">
					<view>
						<text>设置结束时间</text>
						<picker class="flex-left" mode="multiSelector" :range="end_arr" :value="multiIndex_b" @columnchange="colEnd" range-key="name" @change="changeEnd">
							<view>
								<text class="pick-time">{{end_time}}</text>
								<image src="../../static/detail/xiangyou-jiantou.svg"></image>
							</view>
						</picker>
					</view>
				</view>
		
			</view>
			<!-- 关联商品 -->
			<view class="relation relation-back" @click="addTo">
				<text>关联商品</text>
				<text class="over-text">{{re_goods.title==''?'添加':re_goods.title}}</text>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</page-container>
</template>

<script setup>
	import {ref,onMounted,reactive, toRefs,watch} from 'vue'
	import {inIt} from '@/Acc-config/init.js'
	import {start_date,end_date} from '@/Acc-config/date.js'
	import {current,months,codays} from '@/Acc-config/ca-time.js'
	function onEnter(){}
	const show = ref(false)
	onMounted(()=>{
		getSeckill()
	})
	current()
	const data = reactive({
		start_arr:start_date ,// 多列选择器数据
		end_arr : end_date,
		multiIndex_a:[0,0,0,0,0],
		multiIndex_b:[0,0,0,0,0], //时间 ，年月日时分，value 每一项的值
		seckill_data:[], //数据
		seckill_cover:'',//封面图
		seckill_title:'', //标题
		seckill_price:'',//秒杀价格
		start_time:'',//开始时间
		end_time:'',//结束时间
		re_goods:{
			title:'',//关联的商品标题
			goods_id:'',//关联的商品id
			video_url:'' ,//关联的短视频
			ori_price:''//关联的原价
		},
		years:[{'year':start_date[0][0].time},{'month':start_date[1][0].time}],
		ban:false //判断设置的秒杀时间是否正确
	})
	const {start_arr,end_arr,multiIndex_a,multiIndex_b,seckill_data,seckill_cover,seckill_title,seckill_price,start_time,end_time,re_goods} = toRefs(data)
	// 获取数据
	async function getSeckill(){
		let DB = await inIt()
		let res = await DB.database().collection('seckill').get()  
		data.seckill_data =res.data
	}
	// 上传轮播图
	import {Feadback,Upload} from '@/Acc-config/media.js'
	async function upImage(){
		const local = await new Upload().image()
		wx.showLoading({title:'正在上传',mask:true})
		// 上传云存储
		const res = await new Upload().cloud(local[0].tempFilePath) 
		data.seckill_cover = res
		wx.hideLoading()
	}
	// 预览图片
	function preView(image){
		new Upload().preview(image,[image])
	} 
	// 开始时间：滚动时触发
	function colStart(e){
		const res = e.detail
		shAre(res,data.start_arr,data.multiIndex_a,'start')
	}
	// 结束时间：滚动时触发
	function colEnd(e){
		const res = e.detail
		shAre(res,data.end_arr,data.multiIndex_b,'end')
	}
	// 开始时间和结束时间滚动时公用的方法：重新计算某年某月的天数
	function shAre(res,to_date,mult,val){ 
		mult[res.column] = res.value
		switch(res.column){
			case 0: //拖到第一列：年
				switch(mult[0]){
					case 0: //第一列的第一个值:当前年
					to_date[1] = months(to_date[0][0].time)
					to_date[2] = codays({year:to_date[0][0].time,month:to_date[1][0].time})
					break;
					case 1: //第一列的第二个值:明年
					to_date[1] = months(to_date[0][1].time)
					to_date[2] = codays({year:to_date[0][1].time,month:-1})
					break;
				}
				mult.splice(1,1,0)
				mult.splice(2,1,0)
				mult.splice(3,1,0)
				mult.splice(4,1,0)
			break;
			case 1: //拖到第二列：月
			let Mo = mult 
			to_date[2] = codays({year:to_date[0][Mo[0]].time,month:to_date[1][Mo[1]].time})

			mult.splice(2,1,0)
			mult.splice(3,1,0)
			mult.splice(4,1,0)
			break;
		}
		// // 滚动到今年
		// if(res.column == 0){
		// 	// 滚动到今年
		// 	if(res.value==0){
		// 	   data.years[0].year = date[0][0].time
		// 	}else if(res.value == 1){
		// 		// 滚动到明年
		// 		data.years[0].year = date[0][1].time
		// 	}
		// }else if(res.column == 1){
		// 	// 滚动到月
		// 	data.years[0].month = date[res.column][res.value].time
		// } 
		// if(res.column ==0 || res.column == 1){ 
		// 	days(data.years)
		// 	data.multiArray[2] =  days(data.years)[0]
		// }
		
	}
	
	// 开始时间：确定
	function changeStart(event){  
		const res = event.detail.value
		const year = start_date[0][res[0]].time
		const month = start_date[1][res[1]].time
		const day = start_date[2][res[2]].time
		const time = start_date[3][res[3]].time
		const minute = start_date[4][res[4]].time
		const sele_res = year + '/' + month + '/' + day + ' ' + time + ':' + minute + ':' + '00'
		data.start_time = sele_res
		// conFirm(res,'start')
	}
	// 结束时间：确定
	function changeEnd(event){ 
		const res = event.detail.value
		const year = end_date[0][res[0]].time
		const month = end_date[1][res[1]].time
		const day = end_date[2][res[2]].time
		const time = end_date[3][res[3]].time
		const minute = end_date[4][res[4]].time
		const sele_res = year + '/' + month + '/' + day + ' ' + time + ':' + minute + ':' + '00'
		data.end_time = sele_res
		// conFirm(res,'end')
	}
	function conFirm(res,val){ 
		const year = date[0][res[0]].time
		const month = date[1][res[1]].time
		const day = date[2][res[2]].time
		const time = date[3][res[3]].time
		const minute = date[4][res[4]].time
		const sele_res = year + '/' + month + '/' + day + ' ' + time + ':' + minute + ':' + '00'
		if(val=='start'){
			data.start_time = sele_res
		}else{
			data.end_time = sele_res
		}
	}
	//监听结束时间是否小于开始时间
	import moment from 'moment'
	moment.locale("zh-cn");
	watch([()=>data.start_time,()=>data.end_time],(newVal,oldVal)=>{
		if(newVal[0] !=''&&newVal[1] !=''){
			const start = moment(newVal[0],'YYYY/MM/DD hh:mm:ss').unix() //转换时间戳
			const end = moment(newVal[1],'YYYY/MM/DD hh:mm:ss').unix() //转换时间戳
			if(start >= end){
				data.end_time = '结束时间早于开始时间'
				data.ban = false
			}else if(start<end){
				data.ban = true
			}
		}
	})
	
	// 去选择关联商品
	function addTo(){
		// 过滤全部id，传过去选择商品的页面,目的是为了关联过的商品不能再关联
		const rel_id = data.seckill_data.map(item=>item.goods_id)
		const str_id = JSON.stringify(rel_id)
		wx.navigateTo({
			url:'/pages/goods-list/list?ref_id=' + str_id
		})
	}
	// 监听关联的商品
	import {select_goods} from '@/Acc-config/answer.js'
	watch(select_goods,(newVal,oldVal)=>{
		data.re_goods.goods_id = newVal.goods_id
		data.re_goods.video_url = newVal.video_url
		data.re_goods.title = newVal.goods_title
		data.re_goods.ori_price = newVal.goods_price
	})
	// 提交
	function suMit(){
		switch(true){
			case data.seckill_cover == '' : new Feadback('请上传封面图','none').toast()
			break;
			case data.seckill_title == '' : new Feadback('请输入标题','none').toast()
			break;
			case data.seckill_price == '' : new Feadback('请输入秒杀价','none').toast()
			break;
			case data.start_time == '' || data.end_time ==''  : new Feadback('请设置秒杀时间','none').toast()
			break;
			case data.ban == false : new Feadback('结束时间不能低于开始时间','none').toast()
			break;
			case data.re_goods.goods_id == '' : new Feadback('请关联一个商品','none').toast()
			break;
			default:database()
		}
	}
	// 提交数据库
	async function database(){
		wx.showLoading({title:'正在提交',mask:true})
		const start_Time = moment(data.start_time,'YYYY/MM/DD hh:mm:ss').unix()
		const end_Time = moment(data.end_time,'YYYY/MM/DD hh:mm:ss').unix()
		let obj = {
			cover:data.seckill_cover,
			title:data.seckill_title,
			ori_price:data.re_goods.ori_price,
			price_spike:Number(data.seckill_price),
			seckill_time:{start_Time,end_Time},
			goods_id:data.re_goods.goods_id,
			video_url:data.re_goods.video_url
		}
		try{
			let DB = await inIt()
			await DB.database().collection('seckill').add({data:obj})
			// 查询该商品将秒杀字段改为true
			await DB.database().collection('goods').doc(data.re_goods.goods_id).update({data:{seckill:true}})
			
			new Feadback('提交成功','success').toast()
			show.value =false
			getSeckill()
			data.seckill_cover = ''
			data.seckill_title = ''
			data.seckill_price = ''
			data.start_time = ''
			data.end_time = ''
			data.re_goods.title = ''
			wx.hideLoading()
			
		}catch(e){
			new Feadback('提交失败').toast()
		}
	}
	// 删除
	async function deLete(id,index){
		try{
			let DB = await inIt()
			let res_data =  await DB.database().collection('seckill').doc(id).remove()
			data.seckill_data.splice(index,1)
			new Feadback('删除成功','success').toast()
		}catch(e){
			new Feadback('删除失败','success').toast()
		}
	}
</script>

<style scoped>
	.sort-table text:nth-child(2) {
		color: #333333 !important;
		background-color: initial !important;
		border-radius: 0 !important;
		padding: 0 !important;
		font-size: 30rpx !important;
	}

	.modify-padding {
		padding-bottom: 60rpx !important;
	}

	.relation-back {
		background-color: #f7f7f7 !important;
		color: #000000 !important;
	}

	.over-text {
		color: #ed6b51 !important;
	}

	.upload-cover {
		position: relative;
	}

	.upload-cover image:nth-child(1) {
		width: 100%;
		height: 380rpx;
		display: block;
	}

	.upload-cover image:nth-child(2) {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 6rpx;
		right: 6rpx;
	}

	.seckill-input input {
		padding: 20rpx;
		background-color: #f7f7f7;
		margin-top: 30rpx;
		border-radius: 7rpx;
	}

	/deep/ .input-color {
		color: #cccccc;
	}

	.pick-Outer {
		background-color: #f7f7f7;
		margin-top: 30rpx;
		padding: 0 20rpx;
		border-radius: 7rpx;
	}

	.pick-view {
		padding: 20rpx 0;
	}

	.pick-view image {
		display: block;
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.pick-view view:nth-child(1) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-left {
		flex: 1;
	}

	.flex-left view {
		justify-content: flex-end !important;
	}

	.Underline {
		border-bottom: 1rpx solid #ededed;
	}

	.pick-time {
		font-size: 27rpx;
	}
</style>
